<template>
	<view class="setting-box">
		<view class="concat-title">账户信息</view>
		<view class="concat-box">
			<view class="concat-inner flex item-center justify-between">
				<text>头像</text>
				<view class="flex item-center">
					<button style="border-radius: 50%;" class="m-0 p-0 transparent mr-8" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="cu-avatar round size-48" :src="userInfo.avatar"></image>
					</button>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
			<view class="concat-inner flex item-center justify-between">
				<text>商户名称</text>
				<view class="flex item-center" @click="openName">
					<text :class="{'unactive':!userInfo.merchantShortName}">{{userInfo.merchantShortName||'未设置'}}</text>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
		</view>
		<view class="concat-title">客服信息</view>
		<view class="concat-box">
			<view class="concat-inner flex item-center justify-between">
				<text>客服电话</text>
				<view class="flex item-center" @click="openConcat">
					<text :class="{'unactive':!userInfo.customerMobile}">{{userInfo.customerMobile||'未设置'}}</text>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
			<view class="concat-inner flex item-center justify-between">
				<text>客服微信号</text>
				<view class="flex item-center" @click="openConcat">
					<text :class="{'unactive':!userInfo.customerWechat}">{{userInfo.customerWechat||'未设置'}}</text>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
			<view class="concat-inner flex item-center justify-between">
				<text>微信客服二维码</text>
				<view class="flex item-center" @click="openConcat">
					<text :class="{'unactive':!userInfo.customerWechatUrl}">{{userInfo.customerWechatUrl?'去修改':'未设置'}}</text>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
		</view>
		<view class="concat-title">安全设置</view>
		<view class="concat-box">
			<view class="concat-inner flex item-center justify-between">
				<text>登录密码</text>
				<view class="flex item-center"  @click="openPwd">
					<text class="unactive">去设置</text>
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
		</view>	
		<view class="concat-title">关于我们</view>
		<view class="concat-box">
			<view class="concat-inner flex item-center justify-between"  @click="toLink('user')">
				<text>用户协议</text>
				<view class="flex item-center">
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
			<view class="concat-inner flex item-center justify-between" @click="toLink('privacy')">
				<text>隐私条款</text>
				<view class="flex item-center">
					<image src="../../../static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
				</view>
			</view>
		</view>	
		<view class="release-btn" @click="loginOut">退出登录</view>
		<updateCustomInfo ref="customInfo"></updateCustomInfo>
		<updatePwd ref="pwdInfo"></updatePwd>
		<updateName ref="nameInfo" />
	</view>
</template>

<script setup>
	import {ref,computed} from 'vue';
	import {useUserStore} from '@/stores/modules/user.js'
	import updateCustomInfo from './components/updateCustomInfo.vue'
	import updatePwd from './components/updatePwd';
	import updateName from './components/updateName';
	import {logoutApi} from '@/api/auth.js'
	import { useWebView } from '@/hooks/useWebView.js'
	import { uploadFileApi } from '@/api/common.js'
	import { updateAvatar } from '@/center/api/user.js'
	
	const webview = useWebView()
	const userStore = useUserStore()
	let userInfo = computed(() => {
		return userStore.userInfo || {}
	})
	const customInfo = ref()
	const pwdInfo = ref()
	const nameInfo = ref()
	
	const loginOut = () => {
		logoutApi()
		uni.setStorageSync('token', null)
		uni.setStorageSync('userInfo', null)
		userStore.$state.userInfo = null
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const openConcat = () => {
		customInfo.value.showPop(true)
	}
	const openPwd = () => {
		pwdInfo.value.showPop(true)
	}
	const openName = () => {
		nameInfo.value.showPop(true)
	}
	const toLink = (type) => {
		if (type === 'user') {
			webview.showUserAgreement('用户服务协议')
		} else if (type === 'privacy') {
			webview.showPrivacyPolicy('隐私协议')
		}
	}
	const onChooseAvatar = (e) => {
		uploadFile(e.detail.avatarUrl)
	}
	const uploadFile = (filePath) => {
		uni.showLoading()
		uploadFileApi(1, {
			name: 'file',
			filePath: filePath
		}).then(async res => {
			uni.hideLoading()
			if (res.code === 200) {
				await updateAvatar({avatar: res.data})
				//获取用商户信息
				userStore.getUserInfo()
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		}).catch(err => uni.hideLoading())
	}
</script>

<style scoped lang="scss">
.setting-box{
	margin: 20px;
}
.concat-title{
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: rgba(51, 51, 51, 1);
	margin-top: 20px;
	&:first{
		margin-top: 0;
	}
}
.concat-box{
	background: rgba(255, 255, 255, 1);
	padding: 12px 16px;
	border-radius: 8px;
	margin-top: 10px;
}
.concat-inner{
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	color: rgba(51, 51, 51, 1);
	.icon-arrow-right{
		width: 14px;
	}
	.unactive{
		color: rgba(51, 51, 51, 0.6);
	}
}
.release-btn {
	// width: 343px;
	height: 46px;
	padding: 12px, 20px, 12px, 20px;
	border-radius: 8px;
	// gap: 10px;
	background: #FA4543;
	color: #ffffff;
	margin: 10px 0px;
	text-align: center;
	line-height: 46px;
	position: fixed;
	width: calc(100% - 40px);
	bottom: 10px;
}
.cu-avatar {
	font-variant: small-caps;
	margin: 0;
	padding: 0;
	display: inline-flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	color: #ffffff;
	white-space: nowrap;
	position: relative;
	width: 96upx;
	height: 96upx;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
	font-size: 1.5em;
}
</style>
